<template>
  <div class="container">
    <div class="order-tit">订单</div>
    <div class="order-item">
      <div>出发地:</div>
      <div class="order-child">西安市未央区凤城二路海洋大厦703</div>
    </div>
    <div class="order-item">
      <div>目的地:</div>
      <div class="order-child">西安市高新区电子正街我爱我家8号楼703室</div>
    </div>
    <div class="order-tit">优惠券</div>
    <div class="order-item order-dis">
      <div>优惠券:</div>
      <div class="dis-money">-￥5</div>
    </div>
    <div class="order-item order-dis">
      <div>总计:</div>
      <div class="total-price">￥150.00</div>
    </div>
    <div class="pay-money">支付</div>
  </div>
</template>
<script>
  export default {
    onLoad () {
      wx.setNavigationBarTitle({
        title: '订单支付'
      })
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#192231',
        animation: {
          duration: 400,
          timingFunc: 'easeIn'
        }
      })
    }
  }
</script>
<style scoped>
.container>div{
  line-height: 98rpx;
  width: 690rpx;
  margin: 0 auto;
}
  .order-tit{
    color: #ec4b37;
  }
  .order-item{
    display: flex;
  }
  .order-child{
    padding-left: 46rpx;
  }
  .order-dis{
    justify-content: space-between;
  }
  .dis-money{
    color: #17c06d;
  }
  .total-price{
    color: #ea4736;
  }
  .pay-money{
    width: 202rpx !important;
    height: 60rpx;
    line-height: 60rpx !important;
    text-align: center;
    border-radius: 20rpx;
    color: #fff;
    background-color: #fe0000;
    margin-top: 142rpx !important;
  }
</style>
